<script setup>
import JSL_BTN from '@/components/JSL-BTN.vue'
import Paging from "@/views/system/component/paging.vue";
const tableData=[
  {id:'124144',
    account:'七天无理由退款',
    status: '1',
    name:'4',},
  {id:'124144',
    account:'30天免举证换货',
    status: '1',
    name:'4',},{id:'124144',
    account:'七天无理由退款',
    status: '0',
    name:'4',},
  {id:'124144',
    account:'30天免举证换货',
    status: '0',
    name:'4',},{id:'124144',
    account:'七天无理由退款',
    status: '1',
    name:'4',},
  {id:'124144',
    account:'30天免举证换货',
    status: '1',
    name:'4',},{id:'124144',
    account:'七天无理由退款',
    status: '1',
    name:'4',},
  {id:'124144',
    account:'30天免举证换货',
    status: '0',
    name:'4',},

]
function handleSwitchChange(row) {
  console.log('Switch changed for row:', row);
  // 这里可以执行更新数据状态的操作
}

import { ref } from 'vue';
import { ElButton, ElDialog, ElForm, ElFormItem, ElInput } from 'element-plus';

    // 弹窗显示与隐藏
    const dialogVisible = ref(false);

    // 表单数据
    const form = ref({
      username: '',
      password: '',
      // 其他字段
    });

    // 提交表单
    const submitForm = () => {
      // 校验表单（如果需要）
      // 如果使用了Element Plus的表单校验功能，这里会调用formRef.validate()

      // 这里可以添加表单提交逻辑，比如通过API发送到服务器
      console.log('提交表单数据:', form.value);

      // 关闭弹窗
      dialogVisible.value = false;
    };



</script>

<template>
<div>
  <div class="title">
    服务支持
  </div>
  <div class="Box">
    <header>
      <div class="row">
        <span>服务支持:</span>
        <input placeholder="请输入服务支持"/>
        <JSL_BTN type="primary" style="margin-left: 20px;">搜索</JSL_BTN>
        <JSL_BTN style="margin-left: 20px;">重置</JSL_BTN>
      </div>
      <div style="margin-top: 20px;">
        <JSL_BTN>新建服务</JSL_BTN>
      </div>
    </header>
    <main>
      <div class="table">
        <el-table :data="tableData" border style="width: 100%">
        <el-table-column prop="id" label="服务支持编号"/>
        <el-table-column prop="account" label="服务支持" />
        <el-table-column prop="name" label="排序"/>
        <el-table-column prop="role" label="是否展示">
          <template #default="{ row }">
            <el-switch
                v-model="row.status"
                active-color="#13ce66"
                inactive-color="#ff4949"
                active-value="1"
                inactive-value="0"
                @change="handleSwitchChange(row)"
            />
          </template>
        </el-table-column>
          <el-table-column fixed="right" label="操作" width="300">
          <template #default style="display: flex">
            <el-button @click="edit" class="btn">编辑</el-button>
            <el-button @click="enable" class="btn">删除</el-button>
          </template>
        </el-table-column>
      </el-table></div>
      <paging></paging>
    </main>
  </div>
</div>
  <el-dialog
      title="添加用户"
      :visible.sync="dialogVisible"
      width="50%"
      @close="dialogVisible = false"
  >
    <!-- 表单 -->
    <el-form :model="form" ref="formRef" label-width="120px">
      <el-form-item label="用户名">
        <el-input v-model="form.username"></el-input>
      </el-form-item>
      <el-form-item label="密码">
        <el-input type="password" v-model="form.password"></el-input>
      </el-form-item>
      <!-- 其他表单项 -->
    </el-form>
    <template #footer>
        <span class="dialog-footer-button">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="submitForm">确 定</el-button>
        </span>
    </template>
  </el-dialog>
</template>

<style scoped lang="scss">
@import "../../assets/style/var.scss";
.title{
  color: $main-color;
  margin-bottom: 20px;
  font-size: 18px;
  font-weight: 500;
}
.Box{
  display: flex;
  flex-direction: column;
  header{
    background: #fff;
    border-radius: 10px;
    padding: 20px;
    margin-bottom: 26px;
    .row{
      display: flex;
      align-items: center;
      input{
        width: 200px;
        height: 40px;
        border-radius: 4px;
        border: 1px solid #DBDBDB;
        padding: 0 4px;
        margin-left: 10px;
        &::placeholder{
          font-weight: 400;
          font-size: 14px;
          color: #CCCCCC;
        }
        &:focus {
          outline: none;
          border: 2px solid $main-color;
        }
      }
    }
  }
  main{
    display: flex;
    flex-direction: column;
    background-color: #FFFFFF;
    padding: 20px;
    paging{
      display: flex;
      justify-content: flex-end;
    }
  }
}

</style>
